<template>
  <div class="purchase-order-page">
    <!-- 搜索条件区域 -->
    <div class="search-conditions">
      <el-card shadow="never" class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <!-- 搜索输入框 -->
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入单据号或供应商或备注"
              clearable
              class="keyword-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- 日期范围 -->
          <el-form-item label="日期:">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="2025-06-01"
              end-placeholder="2025-06-27"
              value-format="YYYY-MM-DD"
              class="date-range-picker"
            />
          </el-form-item>

          <!-- 付款状态 -->
          <el-form-item label="付款状态:">
            <el-select
              v-model="searchForm.paymentStatus"
              placeholder="请选择"
              clearable
              class="status-select"
            >
              <el-option label="全部" value="" />
              <el-option label="未付款" value="unpaid" />
              <el-option label="已付款" value="paid" />
            </el-select>
          </el-form-item>

          <!-- 审核状态 -->
          <el-form-item label="审核状态:">
            <el-select
              v-model="searchForm.auditStatus"
              placeholder="空"
              clearable
              class="status-select"
            >
              <el-option label="全部" value="" />
              <el-option label="待审核" value="pending" />
              <el-option label="已审核" value="approved" />
            </el-select>
          </el-form-item>

          <!-- 退货状态 -->
          <el-form-item label="退货状态:">
            <el-select
              v-model="searchForm.returnStatus"
              placeholder="请选择"
              clearable
              class="status-select"
            >
              <el-option label="全部" value="" />
              <el-option label="无退货" value="no_return" />
              <el-option label="有退货" value="has_return" />
            </el-select>
          </el-form-item>

          <!-- 仓库 -->
          <el-form-item label="仓库:">
            <el-input
              v-model="searchForm.warehouse"
              placeholder="请输入"
              clearable
              class="warehouse-input"
            />
          </el-form-item>

          <!-- 商品 -->
          <el-form-item label="商品:">
            <el-input
              v-model="searchForm.product"
              placeholder="请输入"
              clearable
              class="product-input"
            />
          </el-form-item>

          <!-- 操作按钮 -->
          <el-form-item class="form-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleAdvancedSearch">高级搜索</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格操作按钮 -->
    <div class="table-actions">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handleExport">导出</el-button>
      <el-button @click="handlePrint">打印</el-button>
    </div>

    <!-- 数据表格 -->
    <div class="data-table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="operation" label="操作" width="80" align="center">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="单据日期" width="120" align="center" />
        <el-table-column prop="orderNo" label="单据编号" width="180" align="center" />
        <el-table-column prop="supplier" label="供应商" width="220" align="center" />
        <el-table-column prop="supplierType" label="供应商类别" width="120" align="center" />
        <el-table-column prop="salesman" label="业务员" width="100" align="center" />
        <el-table-column prop="relatedReturnNo" label="关联购货退货单号" width="180" align="center" />
        <el-table-column prop="relatedOrderNo" label="关联购货订单号" width="180" align="center" />
        <el-table-column prop="quantity" label="数量" width="100" align="right" />
        <el-table-column prop="purchaseAmount" label="购货金额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.purchaseAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="discountAmount" label="优惠金额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.discountAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="finalAmount" label="优惠后金额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.finalAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="taxAmount" label="税额" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.taxAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="settlementAccount" label="结算账户" width="120" align="center" />
        <el-table-column prop="paidAmount" label="已付款" width="120" align="right">
          <template #default="{row}">
            {{ formatCurrency(row.paidAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付款状态" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="row.paymentStatus === 'paid' ? 'success' : 'warning'">
              {{ row.paymentStatus === 'paid' ? '已付款' : '未付款' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="returnStatus" label="退货状态" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="row.returnStatus === 'has_return' ? 'danger' : 'success'">
              {{ row.returnStatus === 'has_return' ? '有退货' : '无退货' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="制单人" width="100" align="center" />
        <el-table-column prop="createTime" label="制单时间" width="180" align="center" />
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { Search } from '@element-plus/icons-vue'

export default {
  name: 'PurchaseOrderPage',
  components: { Search },
  data() {
    return {
      searchForm: {
        keyword: '',
        dateRange: ['2025-06-01', '2025-06-27'],
        paymentStatus: '',
        auditStatus: '',
        returnStatus: '',
        warehouse: '',
        product: ''
      },
      tableData: [
        {
          orderDate: '2025-06-01',
          orderNo: 'PO20250601001',
          supplier: '广州食品有限公司',
          supplierType: '食品供应商',
          salesman: '张三',
          relatedReturnNo: '',
          relatedOrderNo: 'SO20250601001',
          quantity: 100,
          purchaseAmount: 5000.00,
          discountAmount: 200.00,
          finalAmount: 4800.00,
          taxAmount: 480.00,
          settlementAccount: '中国银行',
          paidAmount: 4800.00,
          paymentStatus: 'paid',
          returnStatus: 'no_return',
          creator: '李四',
          createTime: '2025-06-01 14:30:22'
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 2
      },
      selectedRows: []
    }
  },
  methods: {
    handleSearch() {
      console.log('执行查询:', this.searchForm)
      this.pagination.currentPage = 1
      this.fetchData()
    },
    handleAdvancedSearch() {
      console.log('打开高级搜索')
    },
    handleAdd() {
      console.log('新增订单')
    },
    handleEdit(row) {
      console.log('编辑订单:', row)
    },
    handleExport() {
      console.log('导出数据')
    },
    handlePrint() {
      console.log('打印数据')
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows
    },
    handlePageChange(page) {
      this.pagination.currentPage = page
      this.fetchData()
    },
    fetchData() {
      // 这里调用API获取数据
      console.log('获取第', this.pagination.currentPage, '页数据')
    },
    formatCurrency(value) {
      return '¥' + value.toFixed(2)
    }
  }
}
</script>

<style scoped>
.purchase-order-page {
  padding: 20px;
  background-color: #f5f7fa;
}

.search-card {
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.el-form-item {
  margin-bottom: 0;
}

.keyword-input {
  width: 280px;
}

.date-range-picker {
  width: 280px;
}

.status-select,
.warehouse-input,
.product-input {
  width: 120px;
}

.form-buttons {
  margin-left: auto;
}

.table-actions {
  margin-bottom: 15px;
}

.data-table {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}

/* 调整Element UI默认样式 */
:deep(.el-input__inner) {
  height: 32px;
  line-height: 32px;
}

:deep(.el-form-item__label) {
  padding-right: 5px;
  color: #606266;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-table {
  font-size: 14px;
}

.el-table--border {
  border: 1px solid #ebeef5;
}

.el-table--border ::v-deep .el-table__cell {
  border-right: 1px solid #ebeef5;
}
</style>